<template>
  <div class="L-main">
    <Header></Header>
    <div
      class="content"
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="leftBox">
        <div class="left_one">
          <div class="organizationSelect">
            <el-select
              v-model="queryOrgListIndex"
              placeholder="请选择"
              @change="queryOrgListChange"
            >
              <el-option
                v-for="item in queryOrgList"
                :key="item.id"
                :label="item.orgName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="organizationNum">
            <div>
              <span>检测机构今日签收样本数</span>
              <span>{{ sampledNums.sampledDayNum }}</span>
            </div>
            <div>
              <span>累计签收样本数</span>
              <span>{{ sampledNums.sampledNum }}</span>
            </div>
          </div>
          <div class="warning">
            <div>
              <img src="../../static/icon1.png" />
            </div>
            <div>
              <div>
                <span>今日预警条码数</span>
                <span>{{ earlyWarningData.conDayNum }}</span>
              </div>
              <div>
                <span>截至目前存在预警条码数</span>
                <span>{{ earlyWarningData.conNum }}</span>
              </div>
            </div>
          </div>
          <div class="result">
            <div class="title">
              <img src="../../static/icon2.png" alt="" />
              <span>未在规定时间内出核酸结果</span>
            </div>
            <div class="list">
              <div class="list_tit">
                <span>条码编号</span>
                <span>采样时间</span>
                <span>签收时间</span>
              </div>
              <div class="ul" id="inoculate">
                <ul>
                  <li v-for="(item, index) in codeWarningOrg" :key="index">
                    <span>{{ item.tubeCode }}</span>
                    <span>{{ item.collectTime }}</span>
                    <span>{{ item.signTime }}</span>
                  </li>
                </ul>
              </div>
              <div class="noData" v-if="codeWarningOrg.length == 0">
                <img src="../../static/no-data.png" />
              </div>
            </div>
          </div>
          <div class="detectionAnalysis">
            <div class="time">
              <span>日期</span>
              <el-date-picker
                v-model="testTubeDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="testTubeChange"
                :picker-options="dateOptions"
              >
              </el-date-picker>
            </div>
            <div class="echarts">
              <div class="echartsTitle">
                <img src="../../static/icon3.png" />
                <span>检测试管规格分析</span>
              </div>
              <v-chart
                :options="echartsOne"
                class="echartsBox"
                :autoresize="true"
                ref="echartsOne"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="rightBox">
        <div class="right_one">
          <div class="right_one_box">
            <div>
              <span>检测完成率</span>
              <span>{{ completionRate.rate.replace(/%/g, "") }}</span>
            </div>
            <!-- <div>
              <span>今日检测完成率</span>
              <span>{{ completionRate.dayRate.replace(/%/g, "") }}</span>
            </div> -->
          </div>
          <div class="right_one_box">
            <el-carousel direction="vertical" :autoplay="true">
              <el-carousel-item
                v-for="(item, index) in positiveNegative"
                :key="index"
              >
                <div class="negative">
                  <template v-if="index == 0">
                    <div>
                      <span>今日录入阴性结果数</span>
                      <span>{{ item.yinResultDayNum }}</span>
                    </div>
                    <div>
                      <span>累计结果阴性总数</span>
                      <span>{{ item.yinResultNum }}</span>
                    </div>
                  </template>
                  <template v-if="index == 1">
                    <div>
                      <span>今日录入阳性结果数</span>
                      <span>{{ item.yangResultDayNum }}</span>
                    </div>
                    <div>
                      <span>累计结果阳性总数</span>
                      <span>{{ item.yangResultNum }}</span>
                    </div>
                  </template>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="right_echart">
          <div class="time">
            <div>
              <span>年份</span>
              <el-date-picker
                v-model="resultYear"
                type="year"
                placeholder="选择年"
                value-format="yyyy"
                @change="resultYearChange"
                :clearable="false"
                :picker-options="dateOptions"
              >
              </el-date-picker>
            </div>
            <div>
              <span>月份</span>
              <el-date-picker
                v-model="resultMonth"
                type="month"
                placeholder="选择月"
                value-format="yyyy-MM"
                @change="resultMonthChange"
                :clearable="false"
                :picker-options="dateOptions"
              >
              </el-date-picker>
            </div>
            <div>
              <span>日期</span>
              <el-date-picker
                v-model="resultDate"
                type="date"
                placeholder="选择日"
                value-format="yyyy-MM-dd"
                @change="resultDateChange"
                :clearable="false"
                :picker-options="dateOptions"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="echarts">
            <div class="echartsTitle">
              <img src="../../static/icon4.png" />
              <span>检测结果总趋势分析</span>
            </div>
            <v-chart
              :options="echartsTwo"
              class="echartsBox"
              :autoresize="true"
              ref="echartsTwo"
            />
          </div>
        </div>
        <div class="right_echart">
          <div class="time">
            <div>
              <span>年份</span>
              <el-date-picker
                v-model="signYear"
                type="year"
                placeholder="选择年"
                value-format="yyyy"
                @change="signYearChange"
                :clearable="false"
                :picker-options="dateOptions"
              >
              </el-date-picker>
            </div>
            <div>
              <span>月份</span>
              <el-date-picker
                v-model="signMonth"
                type="month"
                placeholder="选择月"
                value-format="yyyy-MM"
                @change="signMonthChange"
                :clearable="false"
                :picker-options="dateOptions"
              >
              </el-date-picker>
            </div>
            <div>
              <span>日期</span>
              <el-date-picker
                v-model="signDate"
                type="date"
                placeholder="选择日"
                value-format="yyyy-MM-dd"
                @change="signDateChange"
                :clearable="false"
                :picker-options="dateOptions"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="echarts">
            <div class="echartsTitle">
              <img src="../../static/icon4.png" />
              <span>签收总趋势分析</span>
            </div>
            <v-chart
              :options="echartsThree"
              class="echartsBox"
              :autoresize="true"
              ref="echartsThree"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 动态生成路由代码
// @route('/detection','detection')
import Header from "@/components/header/header.vue";
// import $ from 'jquery'
export default {
  components: {
    Header,
  },
  data() {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (day < 10) {
      day = "0" + day;
    }
    var nowDate = year + "-" + month + "-" + day;

    return {
      testTubeDate: "",
      echartsOne: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#05294D",
            },
          },
          formatter: function (params) {
            let str = "";
            for (let i = 0; i < params.length; i++) {
              if (i == 0) {
                str += `${params[i].name}<br/>${params[i].seriesName}：<span>${params[0].data.value}</span>根<br/>`;
                continue;
              }
              str += `${params[i].seriesName}：<span>${params[i].data.percentage}</span>%<br/>`;
            }
            return str;
          },
          padding: [20, 20, 20, 20],
        },
        grid: {
          borderWidth: 0,
          top: "25%",
          left: "6%",
          right: "10%",
          bottom: "25%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          top: "0%",
          right: "2%",
          textStyle: {
            fontSize: "12",
            color: "#FFFFFF",
          },
          icon: "circle",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "rgba(98,93,114,0.6)",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#cccccc",
              fontSize: 14,
            },
            data: ["10人管", "5人管", "1人管"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量/根",
            nameTextStyle: {
              color: "#eee",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(98,93,114,0.6)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#eee",
              },
            },
            minInterval: 1,
          },
          {
            min: 0,
            max: 100,
            position: "right",
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#eee",
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "签收试管总数",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "#00e3e4",
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#fff",
                    fontSize: 16,
                  },
                },
              },
            },
            data: [],
          },
          {
            name: "占比",
            type: "line",
            symbolSize: 0,
            yAxisIndex:1,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "#ffcc00",
                barBorderRadius: 0,
              },
            },
            label: {
              show: true,
            },
            data: [],
          },
        ],
      },
      echartsTwo: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",

            textStyle: {
              color: "#05294D",
            },
          },
          formatter: function (params) {
            let str = "";
            for (let i = 0; i < params.length; i++) {
              if (i == 0) {
                str += `${params[i].name}检测结果<br/><span style="color:#00f9f9">${params[i].seriesName}：${params[0].value}人</span><br/>`;
                continue;
              }
              str += `<span style="color:#00f9f9">${params[i].seriesName}：${params[i].value}人</span><br/>`;
            }
            return str;
          },
          padding: [20, 20, 20, 20],
        },
        grid: {
          borderWidth: 0,
          top: "25%",
          left: "6%",
          right: "3%",
          bottom: "20%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          top: "0%",
          right: "2%",
          textStyle: {
            fontSize: "12",
            color: "#FFFFFF",
          },
          icon: "circle",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "rgba(98,93,114,0.6)",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#cccccc",
              fontSize: 14,
            },
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              color: "#eee",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(98,93,114,0.6)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#eee",
              },
            },
            minInterval: 1,
          },
        ],
        series: [
          {
            name: "阴性",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "#44d8a8",
              },
            },
            data: [],
          },
          {
            name: "阳性",
            type: "bar",
            // "stack": "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "#ffcc00",
              },
            },
            data: [],
          },
          {
            name: "未出结果",
            type: "line",
            symbolSize: 0,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "#e9346d",
                barBorderRadius: 0,
              },
            },
            data: [],
          },
        ],
      },
      echartsThree: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",

            textStyle: {
              color: "#05294D",
            },
          },
          padding: [20, 20, 20, 20],
          formatter: function (params) {
            let str = "";
            for (let i = 0; i < params.length; i++) {
              if (i == 0) {
                str += `${params[i].name}<br/><span style="color:#00f9f9">${params[i].seriesName}：${params[0].value}个</span><br/>`;
                continue;
              }
              str += `<span style="color:#00f9f9">${params[i].seriesName}：${params[i].value}个</span><br/>`;
            }
            return str;
          },
        },
        grid: {
          borderWidth: 0,
          top: "25%",
          left: "6%",
          right: "3%",
          bottom: "20%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          top: "0%",
          right: "2%",
          textStyle: {
            fontSize: "12",
            color: "#FFFFFF",
          },
          icon: "circle",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "rgba(98,93,114,0.6)",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#cccccc",
              fontSize: 14,
            },
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              color: "#eee",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(98,93,114,0.6)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#eee",
              },
            },
            minInterval: 1,
          },
        ],
        series: [
          {
            name: "签收量",
            type: "line",
            symbolSize: 6,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "#00e2e3",
                barBorderRadius: 0,
              },
            },

            lineStyle: {
              width: 3,
            },
            data: [],
          },
        ],
      },
      resultYear: "",
      resultMonth: "",
      resultDate: nowDate,
      signYear: "",
      signMonth: "",
      signDate: nowDate,
      orgId: "",
      completionRate: {
        rate: "",
        dayRate: "",
      },
      sampledNums: {},
      queryOrgList: [],
      queryOrgListIndex: 0,
      earlyWarningData: {},
      codeWarningOrg: [],
      positiveNegative: [],
      loading: false,
      dateOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
    };
  },
  activated() {
    window.addEventListener("resize", this.resize);
  },

  deactivated() {
    window.removeEventListener("resize", this.resize);
  },

  async created() {
    try {
      await this.getQueryOrgList()
        .then(async (res) => {
          this.queryOrgListIndex = res.data[0].id;
          this.orgId = this.queryOrgListIndex;
          this.queryOrgList = res.data;
          this.requestAll();
        })
        .catch(() => {});
    } catch {
      console.log("报错");
    }

    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
  methods: {
    resize() {
      this.$refs.echartsOne.resize();
      this.$refs.echartsTwo.resize();
      this.$refs.echartsThree.resize();
    },
    async requestAll() {
      this.getCompletionRate();
      this.getSampledNums();
      this.getEarlyWarningData();
      this.getCodeWarningOrg();
      this.getDetectLimitCount();
      this.getDetectResultCount();
      this.getSignCount();
      Promise.all([
        this.getResultEntryYinNums(),
        this.getResultEntryYingNums(),
      ]).then((res) => {
        this.positiveNegative = res;
      });
    },
    //检测完成率
    getCompletionRate() {
      this.$axios({
        url: "/home/nucleic/completionRate",
        method: "post",
        needAuth: true,
        data: {
          orgId: this.orgId,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.completionRate = res.data;
        }
      });
    },

    async getQueryOrgList() {
      this.loading = true;
      //查询检测机构列表
      return new Promise((reslove, req) => {
        this.$axios({
          url: "/api/nucleic/queryOrgList",
          method: "post",
          needAuth: true,
        }).then((res) => {
          if (res.code == 200) {
            reslove(res);
          } else {
            req(res);
          }
        });
      });
    },

    queryOrgListChange(e) {
      this.orgId = e;
      this.requestAll();
    },

    getSampledNums() {
      //今日签收样本
      this.$axios({
        url: "/home/nucleic/sampledNums",
        method: "post",
        needAuth: true,
        data: {
          orgId: this.orgId,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.sampledNums = res.data;
        }
      });
    },

    getEarlyWarningData() {
      //今日预警条码数
      this.$axios({
        url: "/home/nucleic/earlyWarningData",
        method: "post",
        needAuth: true,
        data: {
          orgId: this.orgId,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.earlyWarningData = res.data;
        }
      });
    },

    getCodeWarningOrg() {
      //核酸结果
      this.$axios({
        url: "/home/nucleic/nucleicDetectTube/codeWarningOrg",
        method: "post",
        needAuth: true,
        data: {
          orgId: this.orgId,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.codeWarningOrg = res.data;
          this.$nextTick(() => {
            jQuery("#inoculate").slide({
              mainCell: "ul",
              autoPlay: true,
              effect: "topMarquee",
              vis: 4,
              interTime: 40,
              trigger: "click",
            });
          });
        }
      });
    },

    getDetectLimitCount(startDate = "", endDate = "") {
      this.$refs.echartsOne.showLoading({
        maskColor: "rgba(0, 0, 0, 0.5)",
        text: "loading",
        textColor: "#fff",
      });
      //检测试管规格分析
      this.$axios({
        url: "/api/nucleic/detectLimitCount",
        method: "post",
        needAuth: true,
        data: {
          orgId: this.orgId,
          startDate: startDate,
          endDate: endDate,
        },
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
      }).then((res) => {
        if (res.code == 200) {
          let num = new Array(3);
          let percentage = new Array(3);
          for (let key in res.data) {
            if (key.includes("num10")) {
              num[0] = {
                value: res.data["num10"],
                percentage: res.data["percent10"],
              };
               percentage[0] = {
                value: res.data["percent10"],
                percentage: res.data["percent10"],
              };
            }
            if (key.includes("num5")) {
              num[1] = {
                value: res.data["num5"],
                percentage: res.data["percent5"],
              };
               percentage[1] = {
                value: res.data["percent5"],
                percentage: res.data["percent5"],
              };
            }
            if (key.includes("num1")) {
              num[2] = {
                value: res.data["num1"],
                percentage: res.data["percent1"],
              };
              percentage[2] = {
                value: res.data["percent1"],
                percentage: res.data["percent1"],
              };
            }
          }
          this.echartsOne.series[0].data = num;
          this.echartsOne.series[1].data = percentage;
          setTimeout(() => {
            this.$refs.echartsOne.hideLoading();
          }, 500);
        }
      });
    },

    getResultEntryYinNums() {
      //今日录入阴性
      return new Promise((reslove, reject) => {
        this.$axios({
          url: "/home/nucleic/resultEntryYinNums",
          method: "post",
          needAuth: true,
          data: {
            orgId: this.orgId,
          },
        }).then((res) => {
          if (res.code == 200) {
            reslove(res.data);
          } else {
            reject();
          }
        });
      });
    },

    getResultEntryYingNums() {
      //今日录入阳性
      return new Promise((reslove, reject) => {
        this.$axios({
          url: "/home/nucleic/resultEntryYingNums",
          method: "post",
          needAuth: true,
          data: {
            orgId: this.orgId,
          },
        }).then((res) => {
          if (res.code == 200) {
            reslove(res.data);
          } else {
            reject();
          }
        });
      });
    },

    testTubeChange(e) {
      console.log(e);
      if (e == null || e == undefined) {
        this.getDetectLimitCount();
      } else {
        this.getDetectLimitCount(e[0], e[1]);
      }
    },

    resultYearChange(e) {
      console.log(e);
      this.resultMonth = "";
      this.resultDate = "";
      this.getDetectResultCount();
    },
    resultMonthChange(e) {
      console.log(e);
      // this.resultYear = e.substring(0, 4);
      this.resultDate = "";
      this.resultYear = "";
      this.getDetectResultCount();
    },
    resultDateChange(e) {
      console.log(e);
      // this.resultYear = e.substring(0, 4);
      // this.resultMonth = e.substring(0, 7);
      this.resultMonth = "";
      this.resultYear = "";
      this.getDetectResultCount();
    },
    getDetectResultCount() {
      //检测结果总趋势分析
      this.$refs.echartsTwo.showLoading({
        maskColor: "rgba(0, 0, 0, 0.5)",
        text: "loading",
        textColor: "#fff",
      });
      let date,
        month,
        year = "";
      let type = "";
      if (this.resultDate) {
        type = "time";
        year = this.resultDate.substring(0, 4);
        month = this.resultDate.substring(5, 7);
        date = this.resultDate.substring(8, 10);
      } else if (this.resultMonth) {
        type = "day";
        year = this.resultMonth.substring(0, 4);
        month = this.resultMonth.substring(5, 7);
      } else {
        type = "month";
        year = this.resultYear.substring(0, 4);
      }
      this.$axios({
        url: "/api/nucleic/detectResultCount",
        method: "post",
        needAuth: true,
        data: {
          orgId: this.orgId,
          year: year,
          month: month,
          date: date,
        },
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
      }).then((res) => {
        if (res.code == 200) {
          let date = res.data.map((item) => {
            if (type == "time") {
              return item.date + "时";
            }
            if (type == "day") {
              return item.date + "日";
            }
            if (type == "month") {
              return item.date + "月";
            }
            return item.date;
          });
          let yin = res.data.map((item) => {
            return item.yin;
          });
          let yang = res.data.map((item) => {
            return item.yang;
          });
          let yet = res.data.map((item) => {
            return item.yet;
          });
          this.echartsTwo.xAxis[0].data = date;
          this.echartsTwo.series[0].data = yin;
          this.echartsTwo.series[1].data = yang;
          this.echartsTwo.series[2].data = yet;
          setTimeout(() => {
            this.$refs.echartsTwo.hideLoading();
          }, 500);
        }
      });
    },

    signYearChange() {
      this.signMonth = "";
      this.signDate = "";
      this.getSignCount();
    },
    signMonthChange() {
      this.signYear = "";
      this.signDate = "";
      this.getSignCount();
    },
    signDateChange() {
      this.signYear = "";
      this.signMonth = "";
      this.getSignCount();
    },
    getSignCount() {
      //签收总趋势分析
      this.$refs.echartsThree.showLoading({
        maskColor: "rgba(0, 0, 0, 0.5)",
        text: "loading",
        textColor: "#fff",
      });
      let date,
        month,
        year = "";
      let type = "";
      if (this.signDate) {
        type = "time";
        year = this.signDate.substring(0, 4);
        month = this.signDate.substring(5, 7);
        date = this.signDate.substring(8, 10);
      } else if (this.signMonth) {
        type = "day";
        year = this.signMonth.substring(0, 4);
        month = this.signMonth.substring(5, 7);
      } else {
        type = "month";
        year = this.signYear.substring(0, 4);
      }
      this.$axios({
        url: "/api/nucleic/signCount",
        method: "post",
        needAuth: true,
        data: {
          orgId: this.orgId,
          year: year,
          month: month,
          date: date,
        },
        headers: {
          "Content-Type": "application/json;charset=utf-8", // application/json
        },
      }).then((res) => {
        if (res.code == 200) {
          let date = res.data.map((item) => {
            if (type == "time") {
              return item.date + "时";
            }
            if (type == "day") {
              return item.date + "日";
            }
            if (type == "month") {
              return item.date + "月";
            }
            return item.date;
          });
          let count = res.data.map((item) => {
            return item.count;
          });
          this.echartsThree.xAxis[0].data = date;
          this.echartsThree.series[0].data = count;
          setTimeout(() => {
            this.$refs.echartsThree.hideLoading();
          }, 500);
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.L-main {
  //   background: url("../../static/bg.png") no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .noData {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      height: 130px;
      width: 130px;
    }
  }

  .content {
    color: #f0f0f0;
    flex: 1;
    overflow: hidden;
    display: flex;
    .leftBox {
      flex: 1;
      overflow: hidden;
      padding-left: 40px;
      box-sizing: border-box;
      .left_one {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        height: 100%;

        .organizationSelect {
          /deep/.el-input__inner {
            background-color: #02252c;
            border: none;
            width: 350px;
          }
        }
        .organizationNum {
          width: 580px;
          height: 102px;
          background-color: rgba(41, 49, 64, 0.2);
          border: solid 1px rgba(20, 206, 214, 0.2);
          box-sizing: border-box;
          padding-left: 40px;
          color: #f0f0f0;
          font-size: 16px;
          display: flex;
          flex-direction: column;
          margin-top: 20px;
          div {
            flex: 1;
            display: flex;
            align-items: center;
            &:nth-child(1) {
              span {
                &:nth-child(1) {
                  width: 200px;
                }
                &:nth-child(2) {
                  color: #00f9f9;
                  font-size: 32px;
                  &::after {
                    content: "个";
                    color: #00f9f9;
                    font-size: 16px;
                    margin-left: 4px;
                  }
                }
              }
            }
            &:nth-child(2) {
              span {
                &:nth-child(1) {
                  width: 200px;
                }
                &:nth-child(2) {
                  color: #44d8a8;
                  font-size: 24px;
                  &::after {
                    content: "个";
                    color: #44d8a8;
                    font-size: 14px;
                    margin-left: 4px;
                  }
                }
              }
            }
          }
        }
        .warning {
          display: flex;
          align-items: center;
          height: 52px;
          margin-top: 40px;
          > div {
            &:nth-child(1) {
              img {
                width: 29px;
                height: 28px;
              }
            }
            &:nth-child(2) {
              height: 100%;
              margin-left: 10px;
              display: flex;
              flex-direction: column;
              font-size: 18px;
              justify-content: space-between;
              div {
                display: flex;
                align-items: center;
                span {
                  &:nth-child(2) {
                    color: red;
                    margin-left: 4px;
                  }
                }
              }
            }
          }
        }
        .result {
          margin-top: 30px;
          .title {
            display: flex;
            align-items: center;
            img {
              width: 31px;
              height: 28px;
              margin-right: 10px;
            }
            span {
              font-size: 18px;
            }
          }
          .list {
            height: 200px;
            overflow: hidden;
            .list_tit {
              background: rgba(0, 226, 227, 0.2);
              height: 37px;
              display: flex;
              align-items: center;
              width: 588px;
              display: flex;
              margin-top: 20px;
              span {
                flex: 1;
                color: #00e3e4;
                font-size: 14px;
                padding-left: 30px;
              }
            }
            .ul {
              width: 588px;
              ul {
                li {
                  height: 37px;
                  display: flex;
                  align-items: center;
                  span {
                    flex: 1;
                    font-size: 14px;
                    padding-left: 30px;
                  }
                  &:hover {
                    background: rgba(0, 226, 227, 0.6);
                  }
                }
              }
            }
          }
        }
        .detectionAnalysis {
          flex: 1;
          overflow: hidden;
          // background: red;
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          .time {
            & > span {
              font-size: 14px;
            }
            /deep/.el-input__inner {
              background: rgba(0, 226, 227, 0);
              color: #f0f0f0;
              border: none;
            }
            /deep/.el-range-input {
              background: rgba(0, 226, 227, 0.2);
              border-radius: 20px;
              color: #fff;
            }
          }
          > .echarts {
            margin-top: 10px;
            flex: 1;
            position: relative;
            overflow: hidden;
            .echartsBox {
              height: 100%;
              width: 100%;
            }
            .echartsTitle {
              color: #fff;
              font-size: 18px;
              position: absolute;
              display: flex;
              align-items: center;
              img {
                width: 29px;
                height: 28px;
                margin-right: 14px;
              }
              span {
                font-size: 18px;
                color: #fff;
              }
            }
          }
        }
      }
    }
    .rightBox {
      flex: 2;
      overflow: hidden;
      padding-right: 40px;
      display: flex;
      flex-direction: column;
      .right_one {
        display: flex;
        margin-top: 90px;
        justify-content: space-between;
        .right_one_box {
          display: flex;
          justify-content: center;
          &:nth-child(1) {
            min-width: 580px;
            height: 102px;
            background: url("../../static/titleBg.png") no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 40px;

            div {
              display: flex;
              span {
                &:nth-child(1) {
                  font-size: 18px;
                  // line-height: 18px;
                  margin-right: 10px;
                }
                &:nth-child(2) {
                  font-size: 60px;
                  background-image: -webkit-linear-gradient(
                    bottom,
                    #eeba64,
                    #ffefc4
                  );
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  font-weight: bold;
                  line-height: 66px;
                  &::after {
                    content: "%";
                    font-size: 33px;
                    background-image: -webkit-linear-gradient(
                      bottom,
                      #eeba64,
                      #ffefc4
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }
                }
              }
            }
          }
          &:nth-child(2) {
            min-width: 580px;
            height: 102px;
            background-color: rgba(41, 49, 64, 0.2);
            border: solid 1px rgba(20, 206, 214, 0.2);
            box-sizing: border-box;
            padding-left: 40px;
            color: #f0f0f0;
            font-size: 16px;
            display: flex;
            flex-direction: column;
          }

          .negative {
            height: 102px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            div {
              // flex: 1;
              display: flex;
              align-items: center;
              &:nth-child(1) {
                span {
                  &:nth-child(1) {
                    width: 200px;
                  }
                  &:nth-child(2) {
                    color: #00f9f9;
                    font-size: 32px;
                    &::after {
                      content: "个";
                      color: #00f9f9;
                      font-size: 16px;
                      margin-left: 4px;
                    }
                  }
                }
              }
              &:nth-child(2) {
                span {
                  &:nth-child(1) {
                    width: 200px;
                  }
                  &:nth-child(2) {
                    color: #44d8a8;
                    font-size: 24px;
                    &::after {
                      content: "个";
                      color: #44d8a8;
                      font-size: 14px;
                      margin-left: 4px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .right_echart {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        .time {
          display: flex;
          div {
            span {
              font-size: 14px;
              margin-right: 10px;
            }
            margin-right: 20px;
            /deep/.el-input__inner {
              background: rgba(0, 226, 227, 0.1);
              color: #f0f0f0;
              border: none;
              border-radius: 20px;
            }
          }
        }
        > .echarts {
          width: 100%;
          margin-top: 20px;
          flex: 1;
          position: relative;
          overflow: hidden;
          .echartsBox {
            height: 100%;
            width: 100%;
          }
          .echartsTitle {
            color: #fff;
            font-size: 18px;
            position: absolute;
            display: flex;
            align-items: center;
            img {
              width: 27px;
              height: 27px;
              margin-right: 14px;
            }
            span {
              font-size: 18px;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>